#sidebar {
  position: fixed;
  background: #fff;
  top: @header-height;
  height: ~"calc(100% - 85px)";
  .translate(-@sidebar-left-width, 0);
  z-index: 62;
  box-shadow: 0 0 15px 2px rgba(0, 0, 0, .25);
  width: @sidebar-left-width;
  overflow: hidden;
  left: 20px;
  .opacity(0);
  .transition(all);
  .transition-duration(300ms);
  .sidebar-inner {
    height: 100%;
    overflow-y: auto;
    width: @sidebar-left-width;
  }

  &.toggled {
    .translate(0, 0);
    .opacity(1);
  }
}

.main-menu {
  list-style: none;
  padding-left: 0;
  margin: 3px 0 20px 0;

  & > li {
    & > a {
      padding: 14px 20px 14px 52px;
      display: block;
      color: @headings-color;
      font-weight: 500;
      position: relative;
      cursor: pointer;
      &:hover {
        color: #262626;
        background-color: #f7f7f7;
      }

      & > i {
        position: absolute;
        left: 16px;
        font-size: 16px;
        top: 0;
        width: 25px;
        text-align: center;
        padding: 16px 0;
      }
    }

    &.active {
      & > a {
        color: #262626;
        background-color: #F4F4F4;
      }
    }
  }

  .divider{
    padding: 20px 12px 10px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .035em;
    pointer-events: none;
    cursor: default;
    color: #aaa;
    border-bottom: 1px solid #eee;
    width: 100%;
    font-style: normal;
  }
}

.sub-menu {
  & > a {
    position: relative;

    &:before{
      position: absolute;
      top: 13px;
      font-family: @font-icon-md;
      color: #999999;
      right: 15px;
      .transition(all);
      .transition-duration(250ms);
      .backface-visibility(hidden);
      content: "\f2f9";
    }
  }

  &.toggled {
    &li.toggled{
      background: #F0F0F0;
    }
    & > a {
      color: black;
      &:before {
        color: black;
        .rotate(180deg);
      }
    }
  }

  ul {
    list-style: none;
    display: none;
    padding: 0;

    & > li {
      & > a {
        color: #7f7f7f;
        padding: 14px 20px 14px 50px;
        font-weight: 500;
        display: block;

        &.active, &:hover {
          color: #000;
          background: #fafafa;
        }
      }

      ul {
        background-color: @app-gray;
      }
    }
  }

  &.active {
    & > ul {
      display: block;
    }
  }
}

/*
 * Full width layout
 */
body {
  &.um-toggled {
    #sidebar {
      @media (min-width: @screen-lg-min) {
        .translate(0,0) !important;
        .opacity(1) !important;
      }
    }
  }

  &.um-toggled.um-footer {
    #sidebar {
      @media (min-width: @screen-lg-min) {
        height: ~"calc(100% - 95px)";
      }
    }
  }

  &.um-notinsettab {
    #sidebar {
      top:63px;
      z-index: 58;
      box-shadow: 0 0 4px -1px rgba(0,0,0,.2),0 0 5px 0 rgba(0,0,0,.14),0 0 10px 0 rgba(0,0,0,.12);
    }
  }

}


/*
 * For Stupid IE9
 */
.ie9 {
  body.um-toggled #sidebar {
    @media (min-width: @screen-lg-min) {
      display: block;
    }
  }

  body:not(.um-toggled) {
    #sidebar:not(.toggled) {
      display: none;
    }
  }
}

.md-sidenav-right {
  min-width: @sidebar-right-width;
  width: @sidebar-right-width;
  .header {
    width: @sidebar-right-width;
    height: 140px;
    background: url("../material/mbg-1.png");
    background-size: 800px;
    background-position: 0 100%;
    position: relative;
    .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      position: absolute;
      top: 25px;
      left: 20px;
      background: url(../material/avatar.jpg), #FFB84D;
      background-size: 260px;
      //border: 3px solid rgba(0,0,0,0.15);
      background-position: -30px -5px;
    }
    .title {
      position: absolute;
      bottom: 0;
      padding-left: 20px;
      color: white;
      background: rgba(0, 0, 0, 0.2);
      width: 100%;
      text-transform: uppercase;
      line-height: 2.5;
    }
  }
}


#sidenav-right {
  overflow-x: hidden;
  .md-avatar {
    background: url(../material/avatar.jpg) -60px 0px;
    background-size: 200px;
  }
  .avatar1 {
    background-position: -100px 0px;
  }
  .avatar2 {
    background-position: -140px 0px;
  }
  md-content {
    overflow-x: hidden;
  }
  md-icon {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 22px;
    line-height: 25px;
  }
}
